<!-- eslint-disable vue/multi-word-component-names -->
<template>
   <div>
    <div id="bgi" >
      <div id="form">
          <div id="login">
            <div  class="input" >
              <span class="iconfont icon-shouji"></span>
              <input type="text" maxlength="18" placeholder="请输入账号" v-model="logining.loginName">
              <span class="alert" v-show="!logining.loginName">请输入账号</span>
            </div>
            <div  class="input" >
              <span class="iconfont icon-24gl-lock2"></span>
              <input :type="type"  maxlength="20" placeholder="请输入密码" v-model="logining.password">
              <span @click.stop="changetype" id="yanjing" :class="['iconfont',showorhide]"></span>
              <span class="alert"  v-show="!logining.password">请输入密码</span>
            </div>
            <div class="input" id="yanzheng">
                  <span class="iconfont icon-yanzheng"></span>
                  <input type="text" placeholder="请输入验证码" v-model="logining.code">
                  <img v-if="img.flag" @click="f5" :src="'https://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/'+logining.clientToken" alt="">
            </div>
            <el-button id="button" type="primary" size="medium " @click="login">登录</el-button>
          </div>
          <div id="logo"><img src="https://likede2-admin.itheima.net/img/logo.595745bd.png" alt=""></div>
      </div>
  </div>
   </div>
</template>

<script>

import { yanzheng, login } from '@/api/login'
import { setToken, userid } from '@/utils/localStorage'
export default {

  async created () {
    for (let i = 65; i < 91; i++) {
      this.randomstr.push(String.fromCharCode(i))
      this.randomstr.push((String.fromCharCode(i)).toLowerCase())
    }
    for (let i = 48; i < 58; i++) {
      this.randomstr.push(String.fromCharCode(i))
    }
    this.f5()
  },
  methods: {
    async login () { // 登录
      const { data } = await login(this.logining)
      console.log('data :>> ', data)
      if (data.msg === '登录成功') {
        this.$message({
          message: data.msg,
          type: 'success'
        })
        setToken(data.token)
        userid(data.userId)
        this.$router.push('/')
      } else {
        this.$message({
          message: data.msg,
          type: 'error'
        })
        this.logining.code = ''
      }
    },
    async  f5 () { // 刷新
      this.img.flag = false
      this.client = []
      this.logining.clientToken = ''
      for (let i = 0; i < 33; i++) {
        this.client.push(this.randomstr[Math.floor(Math.random() * 62 + 1)])
      }
      this.logining.clientToken = this.client.join('')
      console.log(this.logining.clientToken)
      const res = await yanzheng(this.logining.clientToken)
      this.img.flag = true
      console.log(res)
    },
    changetype () { // 显示与隐藏
      if (this.type === 'password') {
        this.type = 'text'
        this.showorhide = 'icon-biyanjing'
      } else if (this.type === 'text') {
        this.type = 'password'
        this.showorhide = 'icon-yanjing'
      }
    }
  },
  data () {
    return {
      img: { url: '', flag: false },
      logining: { loginName: 'admin', password: 'admin', code: '', loginType: 0, clientToken: '' },
      randomstr: [],
      client: [],
      type: 'password',
      showorhide: 'icon-biyanjing'

    }
  }

}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
#yanjing{
 font-size: 20px;
      width: 40px;;
      height: 52px;
      line-height: 52px;
}
#bgi{
  width:100vw;
  height:100vh;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
}

#form{
  position: relative;
  // left: 29%;
margin: 9% auto 0;
  width: 518px;
  height: 388px;
  padding: 76px 35px 0px;
  background-color: #fff;
  box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
  #logo{
    position: absolute;
    top: -8%;
    left: 41%;
    width: 96px;
    height: 96px;
    border-radius: 100px;
    img{
      width: 100%;

    }
  }
  #login{
    margin: 0 auto;
    // background-color: skyblue;
    .input{
    position: relative;
    padding: 0 14px 0;
    display: flex;
    width: 100%;
    height: 51px;
    align-items: center;
    // background-color: rgb(67, 122, 144);
    margin-bottom: 24px;
    border:1px solid #e2e2e2;
    .alert{
      position: absolute;
      left: 0;
      top:54px;
      color: red;
      font-size: 12px;
    }
    input{
      font-size: 14px;
      width:100%;
      height:98%;
      border: 0px;
      outline: none;

    }
    .iconfont{
      font-size: 20px;
      width: 40px;;
      height: 52px;
      line-height: 52px;
      // background-color: red;
    }
    #yanjing{
      position: absolute;
      right: 10px;
      font-size: 20px;
      width: 40px;;
      height: 52px;
      line-height: 52px;
}
    img{
    width: 130px;
    height: 52px;
    position: absolute;
    right: 0px;

    }
}
#yanzheng{
  position: relative;
  width: 100%;
  // background-color: red;
}
.el-button {
    width: 448px;
    height: 52px;
    margin-left :0px;
    }
  }
}
</style>
